<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <style>
      /* 注册表单的容器 */
      .register-container {
        margin: 0 auto;
        max-width: 500px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
      }

      /* 注册表单 */
      #register-form {
        display: flex;
        flex-direction: column;
      }

      /* 表单组 */
      .form-group {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
      }

      /* 表单标签 */
      label {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
      }

      /* 输入框 */
      input[type="text"],
      input[type="email"],
      input[type="password"] {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 16px;
        margin-bottom: 10px;
      }

      /* 提交按钮 */
      .btn {
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        padding: 10px;
        cursor: pointer;
      }

      /* 鼠标悬浮样式 */
      .btn:hover {
        background-color: #3e8e41;
      }
    </style>
  <body style="text-align:center;background-image: url('./index/bg.jpg');">

    <!-- 注册表单的容器 -->
    <div class="register-container" style="background-color: #787878;margin-top: 8%;">
      <h2>注册</h2>
      <!-- 注册表单 -->
      <form id="register-form" method="post" action="/register">
        <!-- 用户名输入框 -->
        <div class="form-group">
          <input type="text" id="username" name="username" placeholder="警员编号" required>
        </div>
        <!-- 密码输入框 -->
        <div class="form-group">
          <input type="password" id="password" name="password" placeholder="密码" minlength="6" required>
        </div>
        <!-- 确认密码输入框 -->
        <div class="form-group">
          <input type="password" id="confirm_password" name="confirm_password" minlength="6"  placeholder="确认密码" required>
        </div>
        <!-- 提交按钮 -->
        <button type="submit" class="btn">注册</button>
        <br><a href="/" style="color:white;">BACK</a>
      </form>
    </div>
    <script src="script.js">
    </script>
  </body>
</html>
